<template>
 <div>
   <div class="client-group-box">
      <div class="client-group-box-tital">
           <div style="display: flex" >
             <a href="#" @click="backReturn" style="display: flex">
             <i class="icon-kehuzu" style="margin-top: 5px"></i>
             <h3>&nbsp;客户组信息管理</h3>
             </a>
           </div>
          <div style="position: absolute;right: 70px;top: 6px ">
            <el-input placeholder="请输入客户组"  style="width: 220px"  v-model="selectMsg"  size="small">
              <el-button size="small" slot="append" @click="changeSerachMsg" class="el-icon-search"  style="background-color: #34a89b;color: white;font-weight: bold;font-size: 15px" ></el-button>
            </el-input>
          </div>
      </div>
     <div class="client-group-box-detail">

       <el-table
         v-loading="loading"
         element-loading-text="已经很努力加载了(•́へ•́╬)"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
         size="medium"
         :data="dataList"
         height="541"
         style="width: 100%"
         @selection-change="handleSelectionChange" >
         <el-table-column
           label="客户组名称"
           align="center"
           >
           <template slot-scope="scope">
             <span style="color: #2c3e50;font-size: 17px;font-weight: bold">{{scope.row.groupClientName}}</span>
           </template>
         </el-table-column>

         <el-table-column label="操作方式" align="center">
           <template slot-scope="scope">
             <el-button type="success"
                ><span style="font-weight: bold;font-size: 15px">修改</span></el-button>
             <el-button
               type="danger"
               ><span style="font-weight: bold;font-size: 15px">删除</span></el-button>
           </template>
         </el-table-column>
         <el-table-column
           align="center"
           label="选定"
           type="selection"
           width="80">
         </el-table-column>
       </el-table>
       <div style="position: relative">
         <el-pagination
           style="margin-top: 10px"
           background
           align="center"
           :page-size="pageSize"
           :current-page="currentPage"
           layout="prev, pager, next"
           @current-change="changePage"
           :total=total>
         </el-pagination>
         <div style="position:  absolute;right: 15px;top:-2px">

           <el-button type="info" size="small">批量删除</el-button>
         </div>

       </div>

     </div>
   </div>
 </div>
</template>

<script>
import {get} from "../../utils/request";
import {GROUP_CLIENT_SHOW_DATA} from "../../utils/basic-data";

export default {
  name: "ClientGroupMsg",
  data(){
    return{
      dataList:[],
      multipleSelection:[],
      pageSize:GROUP_CLIENT_SHOW_DATA,
      selectMsg:null,
      currentPage:1,
      total:0,
      loading:true,
    }
  },
  mounted() {
    this.loading=true
    get("/api/v1/groupClient/show",{now:this.currentPage,size:this.pageSize}).then(resp=>{
      this.dataList=resp.data.objectList
      this.currentPage=resp.data.currenPage
      this.total=resp.data.total
      this.loading=false
    })
  },
  methods:{
    backReturn(){
      this.currentPage=1
      this.selectMsg=null
      this.loading=true
      get("/api/v1/groupClient/show",{now:this.currentPage,size:this.pageSize}).then(resp=>{
        this.dataList=resp.data.objectList
        this.currentPage=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    changePage(value){
      this.loading=true
      this.currentPage=value
      get("/api/v1/groupClient/show",{now:this.currentPage,size:this.pageSize,selectMsg:this.selectMsg}).then(resp=>{
        this.dataList=resp.data.objectList
        this.currentPage=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })
    },
    changeSerachMsg(value){
      this.loading=true
      this.currentPage=1
      get("/api/v1/groupClient/show",{now:this.currentPage,size:this.pageSize,selectMsg:this.selectMsg}).then(resp=>{
        this.dataList=resp.data.objectList
        this.currentPage=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })
    }

  }

}
</script>

<style scoped>
.input-with-select{

}
a{
  text-decoration: none;
  color: #2c3e50;
}
.client-group-box-detail{
  background-color: #f2f2f2;
  height: 590px;
  width: 1270px;
  margin-left: 10px;
  border-radius: 20px;
  padding-top: 20px;
}
h3{
  margin: 0;
}
.client-group-box-tital{
  position: relative;
  padding-top: 10px;
  padding-left: 25px;
  display: flex;
  height: 35px;
  width: 100%;
  /*background-color: #ff3526;*/
}
.client-group-box{
  height: 674px;
  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
